<template>
    <div class="modal fade" id="addLableNameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel"> {{title}}标签 </h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
          	 		<div class="form-group">
	                  <label class="col-md-4 col-sm-2 control-label"><span class="required">*</span>标签名称：</label>
						<div class="col-md-8 col-sm-10">
							<input type="text" id="codeName" v-model="lable.codeName" class="form-control" placeholder="请输入标签名称">
						</div>
	                </div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">备注：</label>
	                  <div class="col-sm-8">
	                    <textarea rows="5" class="form-control" v-model="lable.remark" placeholder="请填写备注"></textarea>
	                  </div>
	                </div>
	            </div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveLable">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["addLableNameModal"],
		data() {
			return {
				//标签信息
				lable: {
					codeName: '',
					remark: ''
				},
				btnShow: true,
				title: '新增',
				url:'',
				body:{}
			}
		},
		watch: {
			//监听父组件绑定值是否改变
			addLableNameModal: {
				handler: function(val, oldVal){
					this.init();
				},
				//深层监听，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		methods: {
			//初始化数据
			init(){
				var optType = this.addLableNameModal.optType;
				if(optType == "A"){
					//新增
					this.title = '新增';
					this.lable.codeName = "";
					this.lable.remark = "";
				}else{
					//修改
					this.title = '编辑';
					this.lable.codeName = this.addLableNameModal.codeName;
					this.lable.remark = this.addLableNameModal.remark;
				}
			},
			saveLable() {
				var _self = this;
				//验证字段，并组装待提交入参
				var boolean = _self.setParams();
				if(!boolean){
					return false;
				}
				_self.$http.post(_self.url, _self.body).then((response)=>{
					var resData = response.body ;
					if(resData.result == "1"){
                		layer.msg("保存成功");
                		$('#addLableNameModal').modal('hide');
						//子组件向父组件传递信号: 调用父组件中对子组件的监听
						_self.$emit('getLableNameListener');
                	}else{
                		layer.msg("保存标签名称失败");
                	}
				},(response)=>{
					layer.msg("保存标签名称失败");
				});
			},
			//组装待提交入参
		   	setParams(){
		   		if(this.lable.typeName == ""){
		   			layer.tips("请填写标签名称", "#codeName",{
					  tips: [2, '#f87242']
					});
		   			return false;
		   		}
		   		var optType = this.addLableNameModal.optType;
				if(optType == "A"){
					//新增标签
					this.body.params = {
						typeId: this.addLableNameModal.typeId,
						codeName: this.lable.codeName,
						remark: this.lable.remark
					};
					this.url = this.utilHelper.apiUrl+'/api/addBaseCodeValue';
				}else{
					//修改标签
					this.body.params = {
						id: this.addLableNameModal.id,
						typeId:this.addLableNameModal.typeId,
						codeName: this.lable.codeName,
						remark: this.lable.remark
					};
					this.url = this.utilHelper.apiUrl+'/api/editBaseCodeValue';
				}
				return true;
		   	}
		}
	}
	
</script>